<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-header v-if="subjectID" style="height: 40px">
          <Breadcrumb :subjectName="subjectName" />
          <!-- <span>{{$route}}</span> -->
        </el-header>
        <el-row>
          <el-col :span="22">
            <el-col :span="22">

              <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
                <el-form-item label="标签名字">
                  <el-input v-model.trim="ruleForm.tagName" placeholder="请输入学科名称" />
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="ruleForm.state">
                    <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button @click="clearForm">清除</el-button>
                  <el-button type="primary" @click="handleClick">查询</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="2">
              <el-button v-if="subjectID" type="text" icon="el-icon-back" @click="$router.back()">返回科学</el-button>
            </el-col>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple-light">
              <el-button type="success" icon="el-icon-edit" @click="openDialog({})">新增标签</el-button>
            </div>
          </el-col>
        </el-row>
        <el-alert type="info" show-icon :closable="false">
          数据一共{{total}}条
        </el-alert>

        <!-- 表格 -->
        <Table ref="tableRef" :page="page" :pageSize="pageSize" @openDialog="openDialog" @getpages="getpages" @pageChange="pageChange" />

        <!-- 分页符 -->
        <Pagination v-if="total>10" :page="page" :pages="pages" :pageSize="pageSize" :pageSizes="pageSizes" @changeSize="changeSize" @changePage="changePage" />
      </el-card>
      <AddTags ref="AddTags" :dialogVisible.sync="dialogVisible" @update="update" />
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'

import Table from './../components/tags-table.vue'
import Pagination from './../components/pagination.vue'
import AddTags from './../components/tags-add.vue'

import Breadcrumb from './../components/breadcrumb.vue'
export default {
  name: 'Tags',
  components: { Table, Pagination, AddTags, Breadcrumb },
  data() {
    return {
      ruleForm: {
        tagName: '',
        state: ''
      },
      total: 0,
      page: 1,
      pages: 2,
      pageSize: 10,
      pageSizes: [5, 10, 20, 50],
      dialogVisible: false // 新增/修改弹窗
    }
  },

  created() {
    // console.log(this.$route)
    console.log(this.subjectID, this.subjectName)
  },
  computed: {
    status: () => status,
    subjectID() {
      return this.$route.query.id
    },
    subjectName() {
      return this.$route.query.name
    }
  },
  methods: {
    // 当前页没有数据 了
    pageChange() {
      if (this.pages >= 1) {
        this.page--
        this.$refs.tableRef.getlist({ page: this.page, pagesize: this.pageSize })
      }
    },
    // 获取 页数 以及 总数
    getpages(total, pages) {
      this.total = total
      this.pages = pages
    },
    // 新增 修改 弹窗
    openDialog(val) {
      this.dialogVisible = true
      // console.log(val)
      if (val.id) {
        this.$refs.AddTags.ruleForm.tagName = val.tagName
        this.$refs.AddTags.ruleForm.subjectID = val.subjectID
        this.$refs.AddTags.ruleForm.id = val.id
      }
      // this.row = val
      // this.$refs.Dialog.form = val
    },
    // 分页符更改数据
    changeSize(size) {
      this.pageSize = size
      this.page = 1
      // 发请求
      this.$refs.tableRef.getlist({ page: this.page, pagesize: this.pageSize })
    },
    changePage(page) {
      this.page = page
      // 发请求
      this.$refs.tableRef.getlist({ page: this.page, pagesize: this.pageSize })
    },

    // 清除查询参数
    clearForm() {
      if (this.ruleForm.tagName || this.ruleForm.state !== '') {
        this.ruleForm = {
          tagName: '',
          state: ''
        }
      } else {
        this.page = 1
        if (this.subjectID) {
          this.$refs.tableRef.getlist({
            subjectID: this.subjectID,
            page: this.page,
            pagesize: this.pageSize
          })
        } else {
          this.$refs.tableRef.getlist({
            page: this.page,
            pagesize: this.pageSize
          })
        }
      }
    },
    // 查询 标签
    handleClick() {
      if (this.ruleForm.state !== '' || this.ruleForm.tagName) {
        const obj = {}
        for (const k in this.ruleForm) {
          this.ruleForm[k] && (obj[k] = this.ruleForm[k])
        }
        this.ruleForm.state !== '' && (obj.state = this.ruleForm.state)
        this.subjectID && (obj.subjectID = this.subjectID)
        console.log(obj)
        this.page = 1
        this.$refs.tableRef.getlist(obj)
        // if (this.ruleForm.state === '') {
        //   if (this.subjectID) {
        //     this.$refs.tableRef.getlist({
        //       subjectID: this.subjectID,
        //       tagName: this.ruleForm.tagName,
        //       page: this.page,
        //       pagesize: this.pageSize
        //     })
        //   } else {
        //     this.$refs.tableRef.getlist({
        //       tagName: this.ruleForm.tagName,
        //       page: this.page,
        //       pagesize: this.pageSize
        //     })
        //   }
        // } else if (!this.ruleForm.tagName) {
        //   if (this.subjectID) {
        //     this.$refs.tableRef.getlist({
        //       subjectID: this.subjectID,
        //       state: this.ruleForm.state,
        //       page: this.page,
        //       pagesize: this.pageSize
        //     })
        //   } else {
        //     this.$refs.tableRef.getlist({
        //       state: this.ruleForm.state,
        //       page: this.page,
        //       pagesize: this.pageSize
        //     })
        //   }
        // } else {
        //   if (this.subjectID) {
        //     this.$refs.tableRef.getlist({
        //       subjectID: this.subjectID,
        //       tagName: this.ruleForm.tagName,
        //       state: this.ruleForm.state,
        //       page: this.page,
        //       pagesize: this.pageSize
        //     })
        //   } else {
        //     this.$refs.tableRef.getlist({
        //       ...this.ruleForm,
        //       page: this.page,
        //       pagesize: this.pageSize
        //     })
        //   }
        // }
      }
    },
    // 新增/修改 后 更新数据
    update() {
      if (this.subjectID) {
        return this.$refs.tableRef.getlist({
          subjectID: this.subjectID,
          page: this.page,
          pagesize: this.pageSize
        })
      }
      this.$refs.tableRef.getlist({
        page: this.page,
        pagesize: this.pageSize
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-header {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}
.el-alert {
  height: 30px;
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: right;
  margin-top: 15px;
}
::v-deep .videoDialog {
  background: rgba(0, 0, 0, 0.05);
  .el-dialog {
    //  display: none;
    background: transparent;
    box-shadow: 0 0;
    .el-dialog__header {
      // background: transparent;
      display: none;
    }
    .el-dialog__body {
      border: transparent;
    }
    .closeVideo {
      position: absolute;
      right: 45%;
      transform: translateX(-50%);
      top: -50px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgb(0, 0, 0, 0.3);
      text-align: center;
      line-height: 40px;
    }
    .video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
